<template>
  <div class="Thead">
    <div>
      <select name="ynian" id="years" v-model="dateValue.year">
        <option v-for="year in years" :key="year" :value="year">
          {{ year }}年
        </option>
      </select>
    </div>
    <div>
      <select name="yyue" id="months" v-model="dateValue.month">
        <option v-for="month in months" :key="month" :value="month">
          {{ month }}月
        </option>
      </select>
    </div>
    <button @click="backToDay" class="btn">今天</button>
  </div>
</template>

<script setup>
import { ref, watch, inject } from 'vue'
const years = ref([])
for (let i = 1970; i <= 2100; i++) {
  years.value.push(i)
}

const months = ref([])
for (let i = 1; i <= 12; i++) {
  months.value.push(i)
}
const dateValue = inject('dateValue', {
  year: {
    type: Number,
  },
  month: {
    type: Number,
  },
  day: {
    type: Number,
  },
})

const emit = defineEmits(['get', 'backToDay'])

watch(
  () => [dateValue.value.year, dateValue.value.month, dateValue.value.day],
  () => {
    emit('get', dateValue.value)
  }
)
const backToDay = () => {
  emit('backToDay', dateValue)
}
</script>

<style scoped>
.Thead {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 350px;
  height: 50px;
  background-color: green;
  border-radius: 20px 20px 0 0;
}
span {
  margin-inline: 10px;
  vertical-align: middle;
}
select {
  width: 100px;
  height: 30px;
  padding-inline: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
button {
  width: 20px;
  height: 30px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
.btn {
  width: 50px;
}
</style>
